<template>
	<view class="pay-success">
		<!-- 顶部 -->
		<view class="back-box">
			<view class="zfcg-box">
				<icon class="icon-zfcg"></icon>
				<view class="text-zfcg">
					<text>支付成功！</text>
					<text>感谢你的购买</text>
				</view>
			</view>
			<!-- 横线 -->
			<view class="line-background"></view>
			<!-- 复制内容 -->
			<view class="info-box">
				<view class="info-price">
					<text>￥</text>
					{{ total_fee }}
				</view>
				<view class="info-item">
					<text>手机号</text>
					{{ phone }}
				</view>
				<view class="info-item">
					<text>微信号</text>
					{{ wx }}
				</view>
				<button type="default" class="bindFz" @click="copyPhone">一键复制</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			total_fee: '', // 金额
			phone: '', //手机号
			wx: '' //微信号
		};
	},
	onLoad(options) {
		this.phone = options.phone;
		this.wx = options.wx;
		this.total_fee = options.total_fee;
	},
	methods: {
		// 一键复制
		copyPhone() {
			uni.setClipboardData({
				data: `手机号：${this.phone}; 微信号：${this.wx}`,
				success: function() {
					uni.showToast({
						title: '复制成功',
						duration: 2000
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f9f9f9;
}
.back-box {
	position: relative;
	width: 100%;
	height: 300rpx;
	background: linear-gradient(180deg, #1db475 0%, #2bc66f 100%);
	.zfcg-box {
		color: #ffffff;
		display: flex;
		justify-content: center;
		padding-top: 70rpx;
		box-sizing: border-box;
		.icon-zfcg {
			width: 112rpx;
			height: 112rpx;
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-zfcgxq.png) no-repeat;
			background-size: cover;
			margin-right: 36rpx;
		}
		.text-zfcg {
			display: flex;
			flex-direction: column;
			justify-content: center;
			font-size: 24rpx;
			& > text:nth-of-type(1) {
				font-size: 36rpx;
				font-weight: 500;
			}
		}
	}
	.line-background {
		width: 642rpx;
		height: 16rpx;
		background: #08995b;
		border-radius: 18rpx;
		position: absolute;
		bottom: 44rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.info-box {
		width: 610rpx;
		height: 492rpx;
		padding: 58rpx 32rpx 40rpx;
		box-sizing: border-box;
		background: #ffffff;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -440rpx;
		// &::before {
		// 	content: '';
		// 	width: 642rpx;
		// 	height: 16rpx;
		// 	background: #08995b;
		// 	border-radius: 18rpx;
		// 	position: absolute;
		// 	top: -8rpx;
		// 	left: 50%;
		// 	transform: translateX(-50%);
		// }
		.info-price {
			color: #333333;
			font-size: 80rpx;
			text-align: center;
			padding-bottom: 56rpx;
			border-bottom: 2rpx dashed #979797;
			font-weight: bold;
			margin-bottom: 38rpx;
			& > text {
				font-size: 48rpx;
			}
		}
		.info-item {
			text-align: center;
			color: #333333;
			font-weight: 500;
			font-size: 28rpx;
			margin-bottom: 20rpx;
			& > text {
				font-weight: 400;
				color: #999990;
				margin-right: 24rpx;
			}
		}
		.bindFz {
			width: 304rpx;
			height: 64rpx;
			background: #d8d8d8 linear-gradient(180deg, #1db475 0%, #2bc66f 100%);
			border-radius: 32rpx;
			color: #ffffff;
			line-height: 64rpx;
			margin-top: 40rpx;
		}
	}
}
</style>
